<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <table id="table" border="1">
        <thead>
            <tr>
                <th>一级需求</th>
                <th>二级需求</th>
            </tr>
        </thead>
        <tbody id="tbody"></tbody>
    </table>

    <script>


        /* ----------内置代码中的data数据渲染出来的table，经过getMergeMap(table, 0)处理，返回 {1:4,5:4,9:1,10:3,12:1}---------- */ 
        function getMergeMap(table, index) {
            let mergeMap = {};
            // 第一行为表头
            /* ----------1. 补全代码实现获取表格单元格合并信息，其中 index 表示要对哪一列的数据进行合并，要求返回值类型为 { 1: 3} 键值对类型，其中 1 表示从第几行开始合并，3 表示从该行开始紧接着需要合并多少个单元格 -------------*/
            const rows = table.rows;
            let currentValue = rows[1].cells[index].innerText;
            let startRow = 1;
            let count = 1;

            for(let i = 2;i < rows.length;i++){
                const cellValue = rows[i].cells[index].innerText;
                if(cellValue === currentValue){
                    count++;
                }else{
                    mergeMap[startRow] = count;
                    currentValue = cellValue;
                    startRow = i;
                    count = 1;
                }
            }
            mergeMap[startRow] = count;
            return mergeMap;
        }


        /* ---------mergeRows函数用于删除合并后多余单元格数据，target为内置代码中的data数据渲染出来的table，mergeMap是合并的数据要求，index表示要对哪一列的数据进行合并，该函数处理后将renderTable函数渲染好的table完成合并操作---------------*/
        function mergeRows(target, mergeMap, index) {
            let mergeIndex = 2;
            for (const key in mergeMap) {
                const count = mergeMap[key];
                target.rows[key].cells[index].rowSpan = count;
                /* ----------2. 补全代码实现对合并后多余单元格的删除操作 -------------*/
                for(let i = parseInt(key) + 1;i < parseInt(key) + count;i++){
                    target.rows[i].cells[index].remove();
                }
            }
        }


        /*--------------------------------------------------------------以下是内置代码无需改动-----------------------------------------------------------------*/


        const data = [
            { "level1": "用户登录功能", "level2": "账号密码登录" },
            { "level1": "用户登录功能", "level2": "手机验证码登录" },
            { "level1": "用户登录功能", "level2": "微信扫码登录" },
            { "level1": "用户登录功能", "level2": "支付宝扫码登录" },
            { "level1": "支付功能", "level2": "微信支付" },
            { "level1": "支付功能", "level2": "支付宝支付" },
            { "level1": "支付功能", "level2": "银联卡支付" },
            { "level1": "支付功能", "level2": "万事达卡支付" },
            { "level1": "退出系统", "level2": "退出登录" },
            { "level1": "搜索商品", "level2": "按类型搜索" },
            { "level1": "搜索商品", "level2": "名称模糊搜索" },
            { "level1": "搜索商品", "level2": "按价格搜索" },
            { "level1": "商品详情", "level2": "商品详情查看功能" },
        ];
        function renderTable(renderData) {
            let tbodyStr = "";
            renderData.forEach((item) => {
                if (item['level1'] == "支付功能" && item['level2'].indexOf("支付") > -1)
                    tbodyStr += `<tr><td>${item['level1']}</td><td><strong>${item['level2']}</strong></td></tr>`
                else
                    tbodyStr += `<tr><td>${item['level1']}</td><td>${item['level2']}</td></tr>`
            });

            const tbody = document.querySelector("#tbody");
            tbody.innerHTML = tbodyStr;
        }
        renderTable(data);
        const table = document.querySelector("#table");
        const tableMergeMap = getMergeMap(table, 0);
        mergeRows(table, tableMergeMap, 0);
    </script>
</body>

</html>